<template>
  <div id="cart">
    <my-head title="购物车"></my-head>
    <div>
       <p id="warn" v-if="products.length === 0">您还未添加商品</p>
       <div v-else>
        <van-checkbox-group v-model="goods" ref="checkboxGroup">
          <van-swipe-cell  v-for="(item, i) in products" :key="item._id">
            <van-checkbox :name="item">
                <van-card
                  :num="item.count"
                  :price="item.price"
                  :title="item.title"
                  class="goods-card"
                  :thumb="item.pic"
                />
            </van-checkbox>
            <template #right>
              <van-button square text="删除" type="danger" @click="delGood(i)" class="delete-button" />
            </template>
          </van-swipe-cell>
        </van-checkbox-group>
        <van-submit-bar v-if="products.length" :price="calcPrice" button-text="提交订单">
          <van-checkbox v-model="allCheck" @click="choseAll">全选</van-checkbox>
        </van-submit-bar>
       </div>
       
    </div>
 </div> 
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import myHead from '@/components/head'
export default {
  name: '',
  components: {
    myHead
  },
  data() { 
    return {
      goods: [],
      allCheck: false
    }
  },
  computed: {
    ...mapState([
      'products'
    ]),

    calcPrice() {
      var sumPrice = 0
      this.allCheck = this.goods.length == this.products.length
      this.goods.forEach((item) => {
        sumPrice+= item.price*item.count*100
      })
      return sumPrice
    }
  },
  created() {
    
  },
  methods:{
    delGood(i) {
      this.products.splice(i, 1)
    },

    choseAll() {
      this.$refs.checkboxGroup.toggleAll(this.allCheck);
    }
  }
 }
</script>

<style scoped>
#cart{
  height: 100vh;
  background: #f6f6f6;
}
  #warn{
    font-size: .3rem;
    line-height: 500px;
    color: #ccc;
    text-align: center;
  }

  >>>.goods-card {
    margin: 0;
    /* background-color: white; */
  }

  >>>.delete-button {
    height: 100%;
  }

  >>>.van-swipe-cell{
    margin-bottom: .4rem;
    background-color: #fff;
    padding: .4rem 0;
  }
  >>>.van-checkbox__label {
    width: 100%;
    margin-left: 0;
  }
  >>>.van-card{
    padding: 0;
  }
  >>>.van-card__content{
    background-color: #fff;
  }
</style>